<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>el和data的两种写法</title>
  <script src="../js/vue.js"></script>
</head>
<body>

<div class="container">
  <div id="root">
      <h1>hello,{{name}}</h1>
  </div>
</div>
<script>
  Vue.config.productionTip = false;
  Vue.config.devtools = true;
  //el的第一种写法
  // new Vue({
  //     el: '#root',
  //     data:{
  //         name:'cty'
  //     }
  // });
  //el的第二种写法
  // const v = new Vue({
  //     data:{
  //         name:'cty'
  //     }
  // })
  // v.$mount('#root'); 将vm对象挂载到容器上
  //data的第一种写法 对象式
  new Vue({
      el:'#root',
      data:{
          name:'cty'
      }
  });
  //data的第二种写法 函数式
  new Vue({
      el:'#root',
      // data:function () {
      //     return{
      //         name:'cty'
      //     }
      // }
      //简写 常在脚手架里使用
      data(){
          return{
              name:'cty'
          }
      }
  })
</script>
</body>
</html>